<template>
	<div class="app">
		<h2>我是App组件（父组件）</h2>
		<h3>School组件（子组件）给我的学校名称是：{{xuexiaoMing}}</h3>
		<h3>School组件（子组件）给我的学校地址是：{{xuexiaoDizhi}}</h3>
		<hr>
		<!-- 给组件实例对象（vc）绑定自定义事件的第一种方式（常用） -->
		<!-- <School @haha="demo"/> -->
		
		<!-- 给组件实例对象（vc）绑定自定义事件的第二种方式（常用） -->
		<School ref="xuexiao"/>
		<br>
		<br>
		<Student @click.native="test"/>
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'
	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				xuexiaoMing:'',
				xuexiaoDizhi:''
			}
		},
		methods:{
			test(){
				console.log('给School组件实例对象绑定的click事件，被触发了')
			}
		},
		mounted(){
			this.$refs.xuexiao.$on('atguigu-haha',(val)=>{
				this.xuexiaoMing = val
			})
			this.$refs.xuexiao.$on('heihei',(val)=>{
				this.xuexiaoDizhi = val
			})
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 20px;
	}
</style>